import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Menu, Icon, Dropdown, Avatar, Row, Col } from 'antd'
import classnames from 'classnames'

import style from './globalHeader.css'
export default class GlobalHeader extends PureComponent {
  static propTypes = {
    deleteLogout: PropTypes.func,
    title: PropTypes.string,
    router: PropTypes.object,
    handleEdit: PropTypes.func
  }
  constructor (props) {
    super(props)
    this.state = {
      route: []
    }
    this.handleLogout = this.handleLogout.bind(this)
  }

  componentDidMount () {
  }

  handleLogout ({ key }) {
    if (key === 'logout') {
      this.props.deleteLogout()
    }
  }

  render () {
    const menu = (
      <Menu className={style['menu']}>
        <Menu.Item key='edit' onClick={this.props.handleEdit}>
          <Icon type='edit' />
          编辑个人信息
        </Menu.Item>
        <Menu.Item key='logout' onClick={this.handleLogout}>
          <Icon type='menu-unfold' />
          退出登录
        </Menu.Item>
      </Menu>
    )

    return (
      <div className={style['page-header']}>
        <Row gutter={24}>
          <Col span={20}>
            <div className={style['left']}>
              <div className={style['header-route']} />
            </div>
          </Col>
          <Col span={4}>
            <div className={style['right']}>
              <Dropdown overlay={menu} trigger={['click']}>
                <span className={classnames(style.action, style.account)}>
                  <Avatar
                    size='small'
                    className={style['avatar']}
                    icon='user'
                    src={localStorage.getItem('avatar')}
                  />
                  <span className={style['name']}>
                    <span>
                      {localStorage.getItem('nickname')}
                    </span>
                  </span>
                </span>
              </Dropdown>
            </div>
          </Col>
        </Row>
      </div>
    )
  }
}
